<template>
  <div id="divml1">
     <!-- 确认筛选 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline">
       <el-form-item label="">
        <el-input
          v-model="search"
          placeholder="搜索电话"></el-input>
      </el-form-item>
        <el-button type="primary"><router-link tag="span" to="/memberd/CoachListAdd">添加教练</router-link></el-button>
    </el-form>
    <!-- -----------表格--------------- -->
    <el-table
      :data="tableData.filter(data => !search || data.phone.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center',background:'#f5f7fa' }"
      :cell-style="{ textAlign: 'center' }"
      border="">
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{scope.row.sex==1?"男":"女"}}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="venueName" label="所属场馆"></el-table-column>
       <el-table-column label="状态">
        <template slot-scope="scope">
         {{scope.row.status==1?"允许":"不允许"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button type="text" size="small"  @click.native.prevent="look(scope.$index, tableData)">查看</el-button>
        <el-button type="text" size="small" @click.native.prevent="editor(scope.$index, tableData)">编辑</el-button>
        <el-button type="text" size="small"  @click.native.prevent="del(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- -------分页------------ -->
    <el-pagination 
    background 
    layout="prev, pager, next" 
    :total="total"
    :page-size="size"  
    @current-change="change"
    @prev-click="prev"
    @next-click="next">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: '',//查询
      page: 1,
      size: 5,
      total: 0,
      formInline: {
        any: "",
      }, //搜索栏
      tableData: [],
      multipleSelection: [], //列表
    };
  },
  methods: {
    editor(index, data){   //修改接口
          // sessionStorage.setItem('ida',data[index].id);
          // this.$router.push('/memberd/CoachListEditor')
          this.$router.push({path:'/memberd/CoachListeditor',name:'CoachListEditor',params:{id:data[index].id}})
    },

    look(index, data){   //查看接口
          // sessionStorage.setItem('idb',data[index].id); 
          // this.$router.push('/memberd/CoachListLook')
          this.$router.push({path:'/memberd/CoachListLook',name:'CoachListLook',params:{id:data[index].id}})
    },

     getCon() {
        this.$axios({
          url: "/gym/coach/list",
          params: {
            page: this.page,
            limit: this.size,
          },
        }).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
        });
      },//查询页面

      del(index, data) {
      this.$confirm("此操作将永久这条内容？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/coach/delete",
            method: "post",
            data: {
              id: data[index].id,
            },
          }).then((res) => {
            if (res.data.error) {
              this.$message.error("删除失败");
            } else {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },//删除

     handleEdit(index, row) {  //搜索框
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
  
      change(page) {
      this.page = page;
      this.getCon();
    },

    prev() {
      this.page--;
      this.getCon();
    },

    next() {
      this.page++;
      this.getCon();
    },//上一页下一页

    notarize() {
      console.log("submit!");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }, //列表
   mounted(){
    this.getCon();
  },
};
</script>
<style scoped>
.demo-form-inline {
  float: left;
  margin-top: 20px;
}
/* 搜索栏 */
.el-table {
  text-align: center;
}

.divml {
  float: left;
}

#divml1 {
  margin: 20px;
}

.el-select {
  margin-right: 10px
}

.el-pagination {
  float: right;
  margin-top: 20px;
}
</style>
